@extends('layouts.default')

@section('title', '权限管理')

@push('scripts')
<style>
    #powerTree .layui-tree {
        border: 1px solid #eee;
        padding: 10px 5px;
        text-align: left;
    }


 
</style>
    <script>
        var totalNUm = 0;
        var table;
        var form;
        var laypage;
        var layer;
        var filters = '';
        var addLayer;
        var editLayer;
        var powerLayer;
        var id = '';
        var util;
        var laytpl;
        var rolelist;
        var tableData;
        var element;
        var roleId;
        $(function(){
            layui.use(['table', 'form', 'element', 'laypage','tree','util','laytpl'], function() {
                table = layui.table;
                element = layui.element;
                form = layui.form;
                laypage = layui.laypage;
                layer = layui.layer;
                tree = layui.tree;
                util = layui.util;
                laytpl = layui.laytpl;
                getList(1);

                table.on('toolbar(tablelsit)', function(obj){
                    switch(obj.event){
                        case 'addBtn':
                            layer.ready(function() {
                                var index = layer.load(2);
                                addLayer = layer.open({
                                    type: 1,
                                    title: '新增',
                                    content: $('#addRole'),
                                    area: ['485px', '300px'],
                                    cancel: function() {
                                        //右上角关闭回调
                                        $('#addRole').hide();
                                        $('#addForm')[0].reset()
                                        //return false 开启该代码可禁止点击该按钮关闭
                                    }
                                });
                                layer.close(index);
                            });
                            break;
                    }
                });

                // 新增提交
                form.on('submit(addSubmit)', function(data) {
                    var data = data.field;
                    var para = {
                        "rolename": data.rolename,
                        "roledes": data.roledes,
                        "role_type": data.role_type,
                    }
                    addRole(para, function(res) {
                        if(res.code == 1) {
                            $('#addRole').hide();
                            layer.close(addLayer);
                            $('#addForm')[0].reset()
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 6
                            });
                            getList(1);
                        } else {
                            $('#addRole').hide();
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 5
                            });
                        }
                    })
                    return false;
                });

                // 编辑提交
                form.on('submit(editSubmit)', function(data) {
                    var data = data.field;
                    var para = {
                        "id": id,
                        "rolename": data.rolename,
                        "roledes": data.roledes,
                        "role_type": data.role_type,
                    }
             
                    editRole(para, function(res) {
                        if(res.code == 1) {
                            $('#editRole').hide();
                            layer.close(editLayer);
                            $('#editForm')[0].reset();
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 6
                            });
                            getList(1);
                        } else {
                            $('#editRole').hide();
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 5
                            });
                        }
                    });

                    return false;
                });

                // 权限设置提交
                form.on('submit(powerSubmit)', function(data) {
                    actionids = [];
                    var checkedData = tree.getChecked('ptree');         

                    var para = {
                        "id": roleId,
                        "actionids": checkedData,
                    }

                    setRolePowers(para, function(res) {
                        if(res.code == 1) {
                            $('#setRolePower').hide();
                            layer.close(powerLayer);
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 6
                            });
                        } else {
                            $('#setRolePower').hide();
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 5
                            });
                        }
                    });

                    return false;
                });

                table.on('tool(tablelsit)', function(obj) {
                    var data = obj.data;
                    id = data.id;

                    if(obj.event === 'edit') { //设置角色弹窗
                        layer.ready(function() {
                            var index = layer.load(2);
                            editLayer = layer.open({
                                type: 1,
                                title: "编辑",
                                content: $('#editRole'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                                area: ['485px', '300px'],
                                cancel: function() {
                                    //右上角关闭回调
                                    $('#editRole').hide();
                                    $('#editForm')[0].reset()
                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });
                            layer.close(index);
                        });
                        //获取编辑的值
                        form.val('editForm', {
                            "rolename": data.rolename,
                            "role_type": data.role_type,
                            "roledes": data.description
                        });

                    } else if(obj.event === 'power') {
                        var index = layer.load(2);
                        var role_id = obj.data.id;
                        roleId = role_id;
                        powerLayer = layer.open({
                            type: 1,
                            title: '权限设置',
                            content: $('#setRolePower'),
                            area: ['100%',"100%"],
                            cancel: function() {
                                $('#setRolePower').hide();
                                //右上角关闭回调
                            }
                        });
                        layer.close(index);
                        renderPowerTree(role_id);
                    } else if(obj.event === 'del'){
                        layer.confirm('确认删除该角色吗', function(index){
                            delRole({'id':obj.data.id},function(res){
                                if(res.code === 1){
                                    layer.msg(res.msg, {
                                        time: 2000,
                                        icon: 6
                                    });
                                    getList(1);
                                }else {
                                    layer.msg(res.msg, {
                                        time: 2000,
                                        icon: 5
                                    });
                                }
                                layer.close(index);
                            })

                        });
                    }
                });
            });
        });

        // 渲染权限树
        function renderPowerTree(role_id) {
            var para = {role_id:role_id};
            getPowerTree(para, function(res){
                if(res.code == 1) {
                    tree.render({
                        elem: '#powerTree',
                        data: res.data.menus,
                        id: 'ptree',
                        showCheckbox: true,
                        showLine: true
                    });
                   // tree.setChecked('ptree', []);
                } else {
                    layer.msg(res.msg, {
                        time: 2000,
                        icon: 5
                    });
                }
            });
        }



        // 获取页面数据
        function getList(page) {
            if (filters == ''){
                filters = {}
            }
            var para = {
                "page": page,
                "filters": filters
            };
            getRoleList(para, function(res){
                if(res.code == 1) {
                    if(totalNUm != res.total) {
                        totalNUm = res.total;
                        renderPageBar(page)
                    }

                    table.render({
                        data: res.data,
                        elem: '#tablelsit',
                        toolbar: '#toolbarDemo',
                        defaultToolbar: [],
                        limit: 10,
                        cols: [
                            [{
                                field: 'rolename',
                                title: '角色名称',
                                width: '30%',
                                align: 'center'
                            },{
                                field: 'role_type',
                                title: '角色类别',
                                width: '20%',
                                align: 'center', 
                                templet: function(d) {
                                    if(d.role_type == 1) {
                                        return '教育';
                                    } else if(d.role_type == 2) {
                                        return '教学';
                                    } else {
                                        return '-';
                                    }
                                }
                            },{
                                field: 'description',
                                title: '角色描述',
                                width: '20%',
                                align: 'center'
                            },{
                                title: '操作',
                                align: 'center',
                                toolbar: '#opDemo'
                            }]
                        ],
                        id:"tableIns",
                        done: function(res, curr, count) {
                            setBtnPermission();
                            tableData = table.cache.tableIns;
                        },
                        page: false,
                        loading: true
                    });
                } else {
                    layer.msg(res.msg, {
                        time: 2000,
                        icon: 5
                    });
                }
            });

        }

        // 渲染页面
        function renderPageBar(page) {
            laypage.render({
                elem: 'pageBar',
                count: totalNUm, //数据总数，从服务端得到
                curr: page,
                limit: 10,
                first: '第一页',
                last: '最后一页',
                layout: ['count', 'prev', 'page', 'next', 'skip'],
                jump: function(obj, first) {
                    //首次不执行
                    if(!first) {
                        layer.closeAll();
                        getList(obj.curr)
                    }
                }
            });
        }

    </script>
@endpush

@section('content')
    <style>
        .layui-table-tool-temp {
            padding: 0;
        }


    </style>

    <div class="layui-card">
        <!-- <div class="layui-card-header" style="font-weight: bold">
            <div style="width: 200px;float: left;" >权限列表</div>
        </div> -->
        <div class="layui-card-body" >               
            <table class="layui-hide" id="tablelsit" lay-filter="tablelsit" lay-data="{id: 'tablelsit'}"></table>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container" style="float: right">
                    <button id="addBtn" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="addBtn" btnPermission="163">新增</button>
                </div>
            </script>
            <div class="pagebarbox" style="text-align: end"><div id="pageBar" class="pagebar"></div></div>

            <script type="text/html" id="opDemo">    
                <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit" btnPermission="164">编辑</a>    
                <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="power" btnPermission="166">权限设置</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" btnPermission="165">删除</a>
            </script>         
        </div>
    </div>
    

        <!-- 新增界面 -->
        <div id="addRole" style="display: none;padding: 20px">
            <form class="layui-form" action="" id="addForm" lay-filter="addForm">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="redstar">*</i>角色名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="rolename" required lay-verify="required" placeholder="请输入角色名称" lay-reqText="角色名称不能为空" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">角色类别</label>
                    <div class="layui-input-inline">
                        <select data-role="" name="role_type" lay-filter="" >
                            <option value="0">请选择</option>
                            <option value="1">教育</option>
                            <option value="2">教学</option>
                        </select> 
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="redstar">*</i>角色描述</label>
                    <div class="layui-input-inline">
                        <input type="text" name="roledes" required lay-verify="required" placeholder="请输入角色描述" lay-reqText="角色描述不能为空" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!--<div class="layui-form-item text-center">-->
                <div style="text-align: center; clear: both;">
                    <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="addSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
                </div>
                <!--</div>-->

            </form>
        </div>

        <!-- 编辑界面 -->
        <div id="editRole" style="display: none;padding: 20px">
            <form class="layui-form" action="" id="editForm" lay-filter="editForm">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="redstar">*</i>角色名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="rolename" required lay-verify="required" placeholder="请输入角色名称" lay-reqText="角色名称不能为空" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">角色类别</label>
                    <div class="layui-input-inline">
                        <select data-role="" name="role_type" lay-filter="" >
                            <option value="0">请选择</option>
                            <option value="1">教育</option>
                            <option value="2">教学</option>
                        </select> 
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="redstar">*</i>角色描述</label>
                    <div class="layui-input-inline">
                        <input type="text" name="roledes" required lay-verify="required" placeholder="请输入角色描述" lay-reqText="角色描述不能为空" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!--<div class="layui-form-item text-center">-->
                <div style="text-align: center; clear: both;">
                    <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="editSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
                </div>
                <!--</div>-->

            </form>
        </div>

        <!-- 权限设置界面 -->
        <div id="setRolePower" style="display: none;padding: 20px">
            <div id="powerTree"></div>

            <div style="text-align: center; clear: both;">
                <button class="pear-btn pear-btn-primary" lay-submit lay-filter="powerSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
            </div>
        </div>
@endsection
